<template>
	<view class="vk-data-loading" :style="styleCom" v-if="valueCom">
		<view
			v-if="mask"
			class="mask"
			:style="{
				backgroundColor: maskBackgroundColorCom
			}"
			@click.stop.prevent="stopPrevent"
			@touchmove.stop.prevent="stopPrevent"
		></view>
		<view class="loading" :style="{ top: top }" v-if="loadingImage || Number(delayTime) == 0">
			<image class="image" :src="image" v-if="showImage" :style="imageStyle"></image>
			<view class="text" :style="titleStyle">{{ title }}</view>
		</view>
	</view>
</template>
<script>
/**
 * loading
 * @prop mask 遮罩层
 * @prop timeout 超时时间（秒） 默认10s
 */
export default {
	name: "vk-data-loading",
	emits: ["update:modelValue", "input"],
	props: {
		value: {
			type: Boolean,
			default: false
		},
		modelValue: {
			type: Boolean,
			default: false
		},
		title: {
			type: String,
			default: ""
		},
		mask: {
			type: Boolean,
			default: true
		},
		maskBackgroundColor: {
			type: String,
			default: "rgba(0,0,0,0)", // rgba(0,0,0,0.2)
		},
		timeout: {
			type: Number,
			default: 30
		},
		image: {
			type: String,
			default: "/static/loading.gif"
		},
		top: {
			type: String,
			default: "40vh"
		},
		zIndex: {
			type: [String, Number],
			default: 99999999
		},
		// 延迟多少毫秒才显示loading图标（在延迟期间，遮罩依然存在，只是完全透明看不见，依然有防止连续点击二次的效果）
		delayTime: {
			type: [String, Number],
			default: 500
		},
		showImage: {
			type: Boolean,
			default: true
		},
		imageStyle: {
			type: [String, Object]
		},
		titleStyle: {
			type: [String, Object]
		}
	},
	data() {
		return {
			loadingImage: false
		};
	},
	created() {
		let that = this;
		if (that.timeout > 0) {
			that._timer = setTimeout(() => {
				if (that.valueCom) {
					that.$emit("input", false);
					that.$emit("update:modelValue", false);
					uni.showToast({
						title: "加载超时，请重试",
						icon: "none"
					});
				}
			}, that.timeout * 1000);
		}
	},
	// #ifndef VUE3
	destroyed() {
		let that = this;
		if (that._timer) clearTimeout(that._timer);
		if (that._loadingImageTimer) clearTimeout(that._loadingImageTimer);
	},
	// #endif

	// #ifdef VUE3
	unmounted() {
		let that = this;
		if (that._timer) clearTimeout(that._timer);
		if (that._loadingImageTimer) clearTimeout(that._loadingImageTimer);
	},
	// #endif
	methods: {
		stopPrevent() {},
		// 显示
		showLoading() {
			let that = this;
			if (Number(that.delayTime) > 0) that.loadingImage = false;
			that._loadingImageTimer = setTimeout(() => {
				that.loadingImage = true;
			}, Number(that.delayTime));
		}
	},
	// 监听属性
	watch: {
		valueCom: {
			handler(val) {
				let that = this;
				if (!val) {
					if (that._timer) clearTimeout(that._timer);
					if (that._loadingImageTimer) clearTimeout(that._loadingImageTimer);
				} else {
					that.showLoading();
				}
			},
			immediate: true
		}
	},
	// 计算属性
	computed: {
		valueCom() {
			// #ifndef VUE3
			return this.value;
			// #endif

			// #ifdef VUE3
			return this.modelValue;
			// #endif
		},
		styleCom() {
			let obj = {};
			let that = this;
			let { zIndex } = that;
			if (zIndex) {
				obj.zIndex = zIndex;
			}
			return obj;
		},
		maskBackgroundColorCom() {
			let that = this;
			let { delayTime, maskBackgroundColor, loadingImage } = that;
			if (Number(delayTime)) {
				return loadingImage ? maskBackgroundColor : "rgba(0,0,0,0)";
			} else {
				return maskBackgroundColor;
			}
		}
	}
};
</script>

<style scoped lang="scss">
.vk-data-loading {
	position: fixed;
	left: 0;
	top: 0;
	width: 0;
	height: 0;
	z-index: 99999999;
	display: flex;
	width: 100vw;
	height: 100vh;
	justify-content: center;
}
.mask {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
.loading {
	position: relative;
	.image {
		padding: 20rpx;
		width: 140rpx;
		height: 140rpx;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.text {
		color: #7e7e7e;
		text-align: center;
		margin-top: 10rpx;
		font-size: 28rpx;
	}
}
</style>
